<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const router = useRouter()
const loginbtn = ref()
const yzm = ref('yzm-off')
const captcha = ref('')
const phone = ref('')
const captchaInit = function () {
    var captchaIns: any;
    initNECaptcha({
        element: '#captcha',// 容器id
        captchaId: 'eb13fcae467948679084a47a35f6ae65',//验证码业务ID
        width: '320px',
        mode: 'popup',//验证码模式 float触发式、embed嵌入式、popup弹出式
        apiVersion: 2,//SDK 版本，推荐设置为 2
        popupStyles: {//自定义样式
            position: 'fixed',
            top: '20%'
        },
        onVerify: function (err: any, data: any) {//验证码一次验证结束回调函数
            if (err) return // 当验证失败时，内部会自动refresh方法，无需手动再调用一次
            yzm.value = 'yzm-on'
        }
    }, function onload(instance: any) {//初始化成功后的验证码实例
        captchaIns = instance
    }, function onerror(err: any) {
        console.warn(err)
    })

    loginbtn.value.addEventListener('click', async (e: any) => {
        if (yzm.value == 'yzm-off') {
            let regexp = new RegExp(/^1[3-9]\d{9}$/)
            if (regexp.test(phone.value) == false) {
                ElMessage({
                    message: '请输入正确手机号',
                    type: 'warning',
                })
                return
            }
            captchaIns && captchaIns.verify()//弹出验证码
        } else {
            ElMessage({
                    message: '验证码已发送,请注意查收！',
                    type: 'success',
                })
            let time = 60
            e.target.innerText = `${time}s后重新发送`
            yzm.value = 'yzm-off'
            e.target.disabled = true
            let timer = setInterval(() => {
                e.target.innerText = `${time - 1}s后重新发送`
                time--
                if (time < 0) {
                    clearInterval(timer)
                    e.target.innerText = '获取验证码'
                    e.target.disabled = false
                    captchaIns.refresh()//刷新验证码
                }
            }, 1000)
            let { data: { data } } = await axios.post('sendsms', { phone: phone.value })
            sessionStorage.setItem('captcha', data)
        }

    })
}
onMounted(() => {
    captchaInit()
})
const login = async () => {
    const code = sessionStorage.getItem('captcha')
    if (captcha.value == '' && phone.value == '') {
        ElMessage({
            message: '请输入完整信息',
            type: 'error',
        })
        return
    }
    if (captcha.value != code) {
        ElMessage({
            message: '验证码错误',
            type: 'error'
        })
        return
    }
    let res = await axios.post('loginByPhone', { phone: phone.value })
    console.log(res);
    localStorage.setItem('accessToken', res.data.accessToken)
    localStorage.setItem('refreshToken', res.data.refreshToken)
    router.push('/nav')
}
const zhuce = async () => {
    router.push('/register')

}




</script>

<template>
    <div>
        <div class="imgs">
            <img src="@/assets/login/1.png" id="img1" alt="">
            <img src="@/assets/login/three.png" id="img2" alt="">
        </div>

        <div class="down">
            <input type="text" id="input1" placeholder="请输入手机号" v-model="phone" />
            <div id="captcha"></div>
            <div class="box">
                <input type="password" id="input2" placeholder="请输入验证码" v-model="captcha" />
                <button :class="yzm" ref="loginbtn">获取验证码</button>
            </div>
            <button id="loginBtn" @click="login">登录</button>
            <div class="litte">
                <button id="forgetBtn">忘记密码</button>
                <button id="noPhoneBtn">还没有账号</button>
                <button id="registerBtn" @click="zhuce">注册</button>
            </div>
            <div id="other"></div>
            <div class="buttons">

            </div>
            <div class="agree">
                <input type="radio" />
                <span id="iagree">我已阅读并同意</span>
                <span id="items">《用户协议》《隐私政策》</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
    position: relative;

    .yzm-on {
        position: absolute;
        margin-top: 18px;
        right: 20px;
        padding: 4px 5px;
        border: none;
        border-radius: 5px;
        color: white;
        background-color: rgb(73, 144, 224);
    }

    .yzm-off {
        position: absolute;
        margin-top: 18px;
        right: 20px;
        padding: 4px 5px;
        border: none;
        border-radius: 5px;
        color: white;
        background-color: rgb(175, 175, 175);
    }
}

.imgs {
    position: relative;
    width: 390px;
    height: 286px;

    #img1 {
        width: 390px;
        height: 286px;
    }

    #img2 {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 390px;
        height: 64px;
    }
}

.down {
    position: relative;
    width: 390px;
    height: 558px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;

    #input1 {
        margin-top: 21px;
        width: 305px;
        height: 56px;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(183, 171, 171, 1);
        font-size: 14px;
        text-align: left;
        box-shadow: 0px 0px 0px 0px rgba(170, 170, 170, 1);
        font-family: Microsoft Yahei;
        border: 0px solid rgba(187, 187, 187, 1);
    }

    #input2 {
        margin-top: 9px;
        width: 305px;
        height: 56px;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(183, 171, 171, 1);
        font-size: 14px;
        text-align: left;
        box-shadow: 0px 0px 0px 0px rgba(170, 170, 170, 1);
        font-family: Microsoft Yahei;
        border: 0px solid rgba(187, 187, 187, 1);
    }

    #loginBtn {
        margin-top: 25px;
        width: 300px;
        height: 60px;
        line-height: 20px;
        border-radius: 4px;
        background-color: rgba(73, 144, 224, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 18px;
        text-align: center;
        box-shadow: 2px 2px 0px 0px rgba(172, 168, 168, 1);
        font-family: Microsoft Yahei;
        border: 1px solid rgba(73, 144, 224, 1);
    }

    .litte {
        margin-top: 17px;

        #forgetBtn {
            position: absolute;
            left: 47px;
            width: 58px;
            height: 24px;
            line-height: 17px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(183, 171, 171, 1);
            font-size: 12px;
            text-align: left;
            font-family: Roboto;
            border: 0px solid rgba(255, 0, 0, 0);
        }

        #noPhoneBtn {
            position: absolute;
            left: 246px;
            width: 69px;
            height: 32px;
            line-height: 17px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(183, 171, 171, 1);
            font-size: 12px;
            text-align: center;
            font-family: Roboto;
            border: 0px solid rgba(255, 0, 0, 0);
        }

        #registerBtn {
            position: absolute;
            right: 31px;
            width: 29px;
            height: 32px;
            line-height: 17px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(73, 144, 224, 1);
            font-size: 12px;
            text-align: center;
            font-family: Roboto;
            border: 0px solid rgba(255, 0, 0, 0);
        }
    }

    #other {
        margin-top: 156px;
        margin-left: 151px;
        width: 70px;
        height: 20px;
        line-height: 20px;
        color: rgba(108, 108, 108, 1);
        font-size: 14px;
        text-align: center;
        font-family: PingFangSC-regular;
    }

    .buttons {
        margin-top: 12px;

        #wechatBtn {
            margin: 0 20px;
            width: 50px;
            height: 50px;
            line-height: 20px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: center;
            font-family: Roboto;
            border: 1px solid rgba(217, 217, 217, 1);
            border-radius: 50%;
        }

        #phoneBtn {
            margin: 0 20px;
            width: 50px;
            height: 50px;
            line-height: 20px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: center;
            font-family: Roboto;
            border: 0;
            border-radius: 50%;

            img {
                position: relative;
                top: 15px
            }



        }

        #appleBtn {
            margin: 0 20px;
            width: 50px;
            height: 50px;
            line-height: 20px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: center;
            font-family: Roboto;
            border: 1px solid rgba(217, 217, 217, 1);
            border-radius: 50%;
        }

        #alipayBtn {
            margin: 0 20px;
            width: 50px;
            height: 50px;
            line-height: 20px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: center;
            font-family: Roboto;
            border: 1px solid rgba(217, 217, 217, 1);
            border-radius: 50%;
        }
    }

    .agree {
        margin-top: 20px;
        margin-left: 20px;

        input {
            width: 20px;
            height: 20px;
        }

        #iagree {
            position: relative;
            bottom: 5px;
            margin-left: 5px;
            width: 100px;
            height: 20px;
            line-height: 20px;
            color: rgba(153, 153, 153, 1);
            font-size: 14px;
            text-align: left;
            font-family: PingFangSC-regular;
        }

        #items {
            position: relative;
            bottom: 5px;
            width: 166px;
            height: 20px;
            line-height: 20px;
            color: rgba(34, 159, 248);
            font-size: 14px;
            text-align: left;
            font-family: PingFangSC-regular;
        }
    }
}
</style>